<template>
  <div style="text-align: left">收费窗口:
  </div>
  <hr/>
  <div style="text-align: left">患者查询:</div>

  <el-form :inline="true"  class="demo-form-inline" :model="formCond">
    <el-form-item label="病历号">
      <el-input v-model="formCond.caseNumber" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="患者姓名">
      <el-input v-model="formCond.realName" placeholder="请输入" clearable />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="loadCheckInfo">查询</el-button>
    </el-form-item>
  </el-form>
  <hr/>

  <div style="text-align: left">
    <el-form :inline="true"  class="demo-form-inline" :model="formRegister">
      <el-form-item label="患者姓名">
        <el-input v-model="formRegister.realName"  clearable readonly/>
      </el-form-item>
      <el-form-item label="身份证">
        <el-input v-model="formRegister.cardNumber"  clearable readonly/>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="formRegister.age" clearable readonly/>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="formRegister.gender"  clearable readonly/>
      </el-form-item>


    </el-form>
  </div>
  <hr/>
  <div style="text-align: left">
    <el-text>项目金额{{ totalPrice }}元</el-text>&nbsp;
    <el-button type="primary" @click="payMoney">收费结算</el-button>
    <el-form :model="formCheck">
      <el-checkbox-group style="width: 100%" v-model="formCheck.checkItems" >
        <el-table :data="checkItemList" style="width: 100%" >


          <el-table-column label="选择">
            <template #default="{ row }">
              <el-checkbox
                  :value="row.id+','+row.techPrice+','+row.checkId"
                  name="checkItems">
              </el-checkbox>
            </template>
          </el-table-column>



          <el-table-column prop="techName" label="检查名称"/>
          <el-table-column prop="techFormat" label="检查规格"/>
          <el-table-column prop="techPrice" label="单价"/>
          <el-table-column prop="priceType" label="费用类型"/>
          <el-table-column prop="creationTime" label="开立时间"/>

        </el-table>


      </el-checkbox-group>
    </el-form>
  </div>
</template>

<script setup>

import {computed, onMounted, reactive, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";


//定义检查项列表集合
const checkItemList = ref([]);
//定义病历号和患者姓名表单数据
const formCond=reactive({
  caseNumber:'',
  realName:''
})
//定义复选框集合数据
const formCheck=reactive({
  checkItems:[]
})
//定义患者信息确认表单数据
const formRegister=reactive({
  realName:'',
  cardNumber:'',
  age:'',
  gender:''
});
onMounted(()=>{
  //loadCheckItemList();
});

//查询按钮的回调函数
function loadCheckInfo(){
  loadRegisterInfo();
  loadCheckItem();
}
/*根据病历号和患者姓名加载病人信息*/
function loadRegisterInfo(){
  axios.get("http://localhost/his/queryRegister/"
      +formCond.caseNumber+"/"+formCond.realName)
      .then((response)=>{
        formRegister.realName=response.data.realName;
        formRegister.cardNumber=response.data.cardNumber;
        formRegister.age=response.data.age;
        formRegister.gender=response.data.gender;
      })
      .catch();
}

/*发送ajax请求加载病人检查项数据*/
function loadCheckItem(){
  axios.get("http://localhost/his/queryCheckList?"
      +formCond.caseNumber+"&realName="+formCond.realName)
      .then((response)=>{
        checkItemList.value=response.data;
      })
      .catch();
}

//定义检查费用总结额
const totalPrice = computed(()=>{
  console.log("===computed");
  var sum=0;
  formCheck.checkItems.forEach((item)=>{
    //console.log(item);
    var temp=item+"";
    temp=temp.substring((temp.indexOf(",")+1));
    //console.log(temp);
    sum=sum+parseFloat(temp);
  });
  return sum;
});

/*实现费用支付*/
function payMoney(){
  console.log(formCheck.checkItems);
  //声明数组保存检查id
  let checkIds=[];
  formCheck.checkItems.forEach((item)=>{
    //item 表示需要变遍历的集合中的每个元素  格式为 x,y,z
    let arr = item.toString().split(",");
    //将arr数组中的元素放入checkIds数组
    checkIds.push(parseInt(arr[2]));
    //console.log(checkIds);
  });
  //发送请求，修改check_request状态
  axios.post("http://localhost/his/updateCheckPayState",checkIds)
      .then((response)=>{
        ElMessage(response.data.msg);
      })
      .catch();
}

</script>

<style scoped>

</style>